// 引入布局样式
@use './layout.scss';

// 基础变量定义
:root {
    // 主题色彩
    --primary-color: #2d8cf0;
    --primary-light: #57a3f3;
    --primary-dark: #1976d2;

    // 功能色彩
    --success-color: #52c41a;
    --warning-color: #faad14;
    --error-color: #f5222d;
    --info-color: #1890ff;

    // 中性色彩
    --text-primary: #262626;
    --text-secondary: #8c8c8c;
    --text-disabled: #bfbfbf;
    --border-color: #e8e8e8;
    --background-color: #f5f5f5;
    --card-background: #ffffff;

    // 间距
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    // 边框圆角
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    // 阴影
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
}

// 重置样式
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    min-height: 100vh;
}

// 滚动条样式
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;

    &:hover {
        background: #a8a8a8;
    }
}

// 通用工具类
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.m-auto {
    margin: auto;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

// 间距工具类
@for $i from 0 through 10 {
    .m-#{$i} {
        margin: #{$i * 4}px;
    }

    .mt-#{$i} {
        margin-top: #{$i * 4}px;
    }

    .mb-#{$i} {
        margin-bottom: #{$i * 4}px;
    }

    .ml-#{$i} {
        margin-left: #{$i * 4}px;
    }

    .mr-#{$i} {
        margin-right: #{$i * 4}px;
    }

    .mx-#{$i} {
        margin-left: #{$i * 4}px;
        margin-right: #{$i * 4}px;
    }

    .my-#{$i} {
        margin-top: #{$i * 4}px;
        margin-bottom: #{$i * 4}px;
    }

    .p-#{$i} {
        padding: #{$i * 4}px;
    }

    .pt-#{$i} {
        padding-top: #{$i * 4}px;
    }

    .pb-#{$i} {
        padding-bottom: #{$i * 4}px;
    }

    .pl-#{$i} {
        padding-left: #{$i * 4}px;
    }

    .pr-#{$i} {
        padding-right: #{$i * 4}px;
    }

    .px-#{$i} {
        padding-left: #{$i * 4}px;
        padding-right: #{$i * 4}px;
    }

    .py-#{$i} {
        padding-top: #{$i * 4}px;
        padding-bottom: #{$i * 4}px;
    }
}

// 页面容器
.page-container {
    min-height: calc(100vh - 60px);
    padding: var(--spacing-lg);
    background-color: var(--background-color);
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--card-background);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

// 卡片样式
.card {
    background: var(--card-background);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);

    &.card-hover {
        transition: box-shadow 0.3s ease;

        &:hover {
            box-shadow: var(--shadow-md);
        }
    }
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);

    .card-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
    }
}

.card-body {
    flex: 1;
}

.card-footer {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

// 状态标签
.status-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    font-weight: 500;

    &.success {
        background-color: rgba(82, 196, 26, 0.1);
        color: var(--success-color);
    }

    &.warning {
        background-color: rgba(250, 173, 20, 0.1);
        color: var(--warning-color);
    }

    &.error {
        background-color: rgba(245, 34, 45, 0.1);
        color: var(--error-color);
    }

    &.info {
        background-color: rgba(24, 144, 255, 0.1);
        color: var(--info-color);
    }

    &.default {
        background-color: rgba(140, 140, 140, 0.1);
        color: var(--text-secondary);
    }
}

// 按钮增强样式
.btn-group {
    display: flex;
    gap: var(--spacing-sm);

    .el-button {
        flex: 1;
    }
}

// 表单增强样式
.form-section {
    margin-bottom: var(--spacing-xl);

    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-sm);
        border-bottom: 2px solid var(--primary-color);
        position: relative;

        &:before {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 40px;
            height: 2px;
            background: var(--primary-color);
        }
    }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

// 统计卡片
.stat-card {
    background: var(--card-background);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;

    &:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--spacing-md);

        &.primary {
            background: rgba(45, 140, 240, 0.1);
            color: var(--primary-color);
        }

        &.success {
            background: rgba(82, 196, 26, 0.1);
            color: var(--success-color);
        }

        &.warning {
            background: rgba(250, 173, 20, 0.1);
            color: var(--warning-color);
        }

        &.error {
            background: rgba(245, 34, 45, 0.1);
            color: var(--error-color);
        }
    }

    .stat-value {
        font-size: 28px;
        font-weight: bold;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

    .stat-label {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: var(--spacing-xs);
    }

    .stat-change {
        font-size: 12px;

        &.positive {
            color: var(--success-color);
        }

        &.negative {
            color: var(--error-color);
        }
    }
}

// 数据列表
.data-list {
    .list-item {
        display: flex;
        align-items: center;
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);
        transition: background-color 0.3s ease;

        &:hover {
            background-color: rgba(45, 140, 240, 0.05);
        }

        &:last-child {
            border-bottom: none;
        }

        .item-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: var(--spacing-md);
            background: var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
        }

        .item-content {
            flex: 1;

            .item-title {
                font-weight: 500;
                color: var(--text-primary);
                margin-bottom: var(--spacing-xs);
            }

            .item-subtitle {
                font-size: 12px;
                color: var(--text-secondary);
            }
        }

        .item-action {
            margin-left: var(--spacing-md);
        }
    }
}

// 空状态
.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);

    .empty-icon {
        font-size: 48px;
        margin-bottom: var(--spacing-md);
        opacity: 0.5;
    }

    .empty-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: var(--spacing-sm);
    }

    .empty-description {
        font-size: 14px;
        margin-bottom: var(--spacing-lg);
    }
}

// 加载状态
.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);

    .loading-text {
        margin-left: var(--spacing-sm);
        color: var(--text-secondary);
    }
}

// 响应式
@media (max-width: 768px) {
    .page-container {
        padding: var(--spacing-md);
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .btn-group {
        flex-direction: column;
    }

    .flex-between {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }
}

// Element Plus 组件样式覆盖
.el-button--primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);

    &:hover,
    &:focus {
        background-color: var(--primary-light);
        border-color: var(--primary-light);
    }

    &:active {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
    }
}

.el-input__wrapper {
    border-radius: var(--border-radius-sm);

    &:hover {
        border-color: var(--primary-color);
    }

    &.is-focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px var(--primary-color) inset;
    }
}

.el-table {
    .el-table__header-wrapper {
        .el-table__header {
            th {
                background-color: #f8f9fa;
                color: var(--text-primary);
                font-weight: 600;
            }
        }
    }

    .el-table__row {
        &:hover>td {
            background-color: rgba(45, 140, 240, 0.05);
        }
    }
}

.el-pagination {

    .btn-next,
    .btn-prev {
        &:hover {
            color: var(--primary-color);
        }
    }

    .el-pager li {
        &:hover {
            color: var(--primary-color);
        }

        &.is-active {
            background-color: var(--primary-color);
            color: white;
        }
    }
}

// 动画
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
    transition: transform 0.3s ease;
}

.slide-enter-from {
    transform: translateX(-100%);
}

.slide-leave-to {
    transform: translateX(100%);
}

// 打印样式
@media print {
    .no-print {
        display: none !important;
    }

    .page-container {
        background: white;
        box-shadow: none;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}